<template>
  <div class="day-wrap">

    <div v-if="showPage == 1">
      <div class="day-box">
        <div class="title">企业选择</div>
        <div class="company-box">
          <span class="company" v-text="company" @click="openCompanyList">请选择企业</span>
          <img src="./pull.png" class="pull" onclick="return false"/>
        </div>
      </div>
      <div class="day-con" @click="staff">
        <div class="title">在职员工管理</div>
        <div class="icon"><img src="./back.png" class="back" onclick="return false"/></div>
      </div>
      <div class="day-con" @click="check">
        <div class="title">资格审核</div>
        <div class="icon"><img src="./back.png" class="back" onclick="return false"/></div>
      </div>
      <div class="day-con" @click="attendance">
        <div class="title">员工考勤</div>
        <div class="icon"><img src="./back.png" class="back" onclick="return false"/></div>
      </div>
    </div>

    <div class="empty-wrap" v-if="showPage == 2">
      <div class="empty-box">
        <div class="img-box"><img src="./empty.png" class="empty" onclick="return false"/></div>
        <div class="tip">抱歉，您没有管理权限！</div>
      </div>
    </div>

    <!--驻厂所在企业-->
    <div class="company-box" v-show="showCompany" @click="closeCompanyList">
      <div class="company-list">
        <div class="name" v-for="(item,index) in companyList" :key="index"
             @click="selectCompany(item.id,item.mechanismName)">{{item.mechanismName}}
        </div>
      </div>
    </div>

    <!--微信绑定手机号-->
    <v-phone v-model="showModal" @bindPhone="bindCustomerPhone"></v-phone>
  </div>
</template>

<script>
  import {baseUrl} from "../../common/js/env"
  import {getUrlKey, setSessionStore, getSessionStore} from "../../common/js/util"
  import phone from "../../components/phone"

  export default {
    data() {
      return {
        company: "",
        showCompany: false,
        companyList: [],
        userSign: "",
        mechanismId: "",
        showPage: 0,
        countentPhone: "",
        showModal: false
      }
    },
    mounted() {
      //获取微信
      this.userSign = getUrlKey("success"); //微信openid
      this.countentPhone = getUrlKey("countentPhone"); //手机框 0弹出1不弹出
      let base64 = require('js-base64').Base64;
      if (this.userSign != "" && this.userSign != "null" && this.userSign != null) {
        setSessionStore("success", base64.encode(this.userSign));
        this.userSign = base64.decode(getSessionStore("success"));
      }

      if (this.countentPhone == "0") {
        this.showModal = true;
      }else{
        this.queryMechanism();
      }
    },
    methods: {
      bindCustomerPhone(phone) {//绑定微信客户手机号
        this.$vux.loading.show({
          text: '加载中',
        });
        //绑定微信手机
        this.axios.get(baseUrl + "/wx_user/set_phone?sgin=" + this.userSign + "&phone=" + phone + "&userName=" + "&userUrl=").then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data == 1) {
            this.queryMechanism();
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      closeCompanyList() {
        this.showCompany = false;
      },
      openCompanyList() {
        this.showCompany = true;
      },
      selectCompany(id, name) {//选择所在企业
        this.showCompany = false;
        this.company = name;
        this.mechanismId = id;
      },
      staff() {
        if (this.mechanismId == "" || this.mechanismId == undefined) {
          this.$vux.toast.text("请选择企业", "middle");
        } else {
          this.$router.push({path: "./staffmanage", query: {mechanismId: this.mechanismId}});
        }
      },
      check() {
        if (this.mechanismId == "" || this.mechanismId == undefined) {
          this.$vux.toast.text("请选择企业", "middle");
        } else {
          this.$router.push({path: "./residentcheck", query: {mechanismId: this.mechanismId}});
        }
      },
      attendance() {
        if (this.mechanismId == "" || this.mechanismId == undefined) {
          this.$vux.toast.text("请选择企业", "middle");
        } else {
          this.$router.push({path: "./attendance", query: {mechanismId: this.mechanismId}});
        }
      },
      queryMechanism() {//查询驻厂所在企业
        this.axios.get(baseUrl + "/work_money/get_mechanism_list?sgin=" + this.userSign).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0) {
            if (resultObj.data != null && resultObj.data.length > 0) {
              this.companyList = resultObj.data;
              for (var i = 0; i < this.companyList.length; i++) {
                this.company = this.companyList[0].mechanismName;
                this.mechanismId = this.companyList[0].id;
                break;
              }
              this.showPage = 1;
            } else {
              this.showPage = 2;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        })
      }
    },
    components: {
      "v-phone": phone
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../common/stylus/mixin.styl"

  .day-wrap
    width: 100%
    height: 100%
    overflow: hidden
    .day-box
      display: flex
      align-items: center
      width: 100%
      height: 1.84rem
      border-bottom: 1px solid rgba(230, 230, 230, 1)
      .title
        margin-left: 0.373333rem
        margin-right: 0.266666rem
        font-size: 0.44rem
        color: rgba(52, 52, 52, 1)
      .company-box
        position: relative
        width: 70%
        padding-left: 0.266666rem
        height: 1.066666rem
        line-height: 1.066666rem
        border: 1px solid rgba(230, 230, 230, 1)
        background: #FFF
        .company
          display: inline-block
          width: 100%
          height: 1.066666rem
          line-height: 1.066666rem
          font-size: 0.44rem
          color: rgba(52, 52, 52, 1)
        .pull
          position: absolute
          top: 0
          bottom: 0
          margin: auto
          right: 0.373333rem
          width: 0.373333rem
          height: 0.213333rem

    .day-con
      display: flex
      align-items: center
      width: 100%
      height: 1.28rem
      border-bottom: 1px solid rgba(230, 230, 230, 1)
      .title
        margin-left: 0.373333rem
        margin-right: 0.266666rem
        font-size: 0.44rem
        color: rgba(52, 52, 52, 1)
      .icon
        width: 0.213333rem
        height: 0.373333rem
        margin-left: auto
        margin-right: 0.373333rem
        .back
          width: 100%
          height: 100
    .company-box
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 88
      fj(center, center)
      background-color: rgba(0, 0, 0, 0.5)
      .company-list
        position: fixed
        z-index: 99
        bottom: 0
        left: 0
        wh(100%, 6.44rem)
        background: #FFF
        overflow: auto;
        .name
          fj(center, center)
          height: 1.28rem
          border-bottom: 1px solid #EEE
          cursor: pointer
          size-color(0.44rem, #666666)
          &:hover
            color: #3CAFFF
    .empty-wrap
      display: flex
      align-items: center
      justify-content: center
      width: 100%
      height: auto
      position: fixed
      top: 0
      bottom: 0
      left: 0
      right: 0
      z-index: -1
      .empty-box
        display: flex
        flex-direction: column
        align-items: center
        .img-box
          width: 3.2rem
          height: 3.2rem
          .empty
            width: 100%
            height: 100%
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          font-size: 0.373rem
          color: rgba(68, 68, 68, 1)
</style>
